<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>五省一市地图</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.1-rc.1/echarts.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
  </head>
  <body>
    <style>
      *,
      body {
        margin: 0;
        padding: 0;
      }
    </style>
    <div id="main" style="width: 100vw; height: 30vh"></div>

    <script>
      window.onload = () => {
        async function getData() {
          const res1 = await fetch("./map_data/data_01.json");
          const res2 = await fetch("./map_data/data_map.json");

          const data = await res1.json();
          const data_map = await res2.json();

          /* return {
            data: topojson.feature(
              data.payload,
              data.payload.objects.collection
            ),
            data_map,
          } */

          return {
            data: data,
            data_map,
          };
        }

        const data_LatAntLong = {
          广东: [113.2644, 23.1291],
          广西: [108.32, 22.824],
          深圳: [114.0579, 22.5431],
          云南: [102.8329, 24.8801],
          贵州: [106.7135, 26.5783],
          海南: [110.1983, 20.044],
        };

        var convertData = function () {
          var res = [];
          const data = new Array(6).fill(null).map((item, index) => ({
            name: Object.keys(data_LatAntLong)[index],
            value: Math.floor(Math.random() * 100),
          }));
          for (var i = 0; i < data.length; i++) {
            const value = data_LatAntLong[data[i].name];
            res.push({
              value: value.concat(data[i].value),
              name: data[i].name,
            });
          }
          return res;
        };
        getData().then((res) => {
          const { data, data_map } = res;
          const chart = echarts.init(document.getElementById("main"));

          echarts.registerMap("五省一市地图", data);

          const options = {
            backgroundColor: "#1c212f",
            tooltip: {
              show: false,
              trigger: "item",
            },
            geo: {
              map: "五省一市地图",
              roam: true, // 开启缩放和平移功能,
              zoom: 2.5, // 设置初始缩放级别
              center: [107.2312, 23.3331],
              itemStyle: {
                normal: {
                  areaColor: "#e67e22",
                  borderColor: "#111",
                },
                emphasis: {
                  itemStyle: {
                    areaColor: "#e67e22",
                    borderColor: "#111",
                  },
                },
                select: {
                  itemStyle: {
                    areaColor: "#e67e22",
                    borderColor: "#111",
                  },
                },
              },
            },
            series: [
              {
                name: "light",
                type: "scatter",
                coordinateSystem: "geo",
                data: convertData(data),
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "right",
                    show: true,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#F4E925",
                  },
                },
                tooltip: {
                  show: true,
                  formatter: function (params) {
                    return params.name + ": " + params.value[2];
                  },
                },
              },
              {
                type: "map",
                geoIndex: 0,
              },
            ],
          };

          chart.setOption(options);
        });
      };
    </script>
  </body>
</html>
